<script setup lang="ts">
import {onMounted, ref} from "vue";
import {Toast} from "vant";
import UserComponent from "@/components/userComponent.vue";
import {getUserList, loveType} from "@/api/home";
import {route} from "vant/es/composables/use-route";
import BlogCard from "@/components/BlogCard.vue";
import {useUserStore} from "@/store/user";

//搜索框
const value = ref('');
const onSearch = (val) => Toast(val);
const onCancel = () => Toast('取消');

//心动模式
const checked = ref(false);
const love = async () => {
  if (checked.value) {
    const userStore = useUserStore();

    const res = await loveType()
    console.log("res:", res)
    userList.value = res;
    console.log("userList.value:", userList.value)
    pageSize.value = 1;
    // loading.value = false;
    // finished.value = false;

  }
};

//用户列表
const currentPage = ref(1);
const pageSize = ref(6);
const userList = ref([]); // 新增：用于存储用户列表数据

// 新增：获取用户列表的函数
const fetchUserList = async () => {
  try {
    const res = await getUserList(currentPage.value, pageSize.value);
    const {records} = res;
    userList.value.push(...records);
    if (Array.isArray(records) && records.length < pageSize.value) {
      finished.value = true;
    }
    console.log("finished", finished.value);
    loading.value = false;
    currentPage.value++;

  } catch (error) {
    console.error('获取用户列表失败:', error);
    Toast('获取用户列表失败');
  }
};

const list = ref([]);
const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1);
    }

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
}

onMounted(() => {
  fetchUserList(); // 页面加载时自动执行
});
console.log(userList);
</script>

<template>
  <van-nav-bar :title="$route.name">
    <!--    <template #right>-->
    <!--      <van-icon name="search" size="18"/>-->
    <!--    </template>-->
  </van-nav-bar>


  <van-notice-bar
      left-icon="bulb-o"
      text="欢迎大家来到厚米匹配ovo，你可以在这里找到学习homie，生活homie甚至是灵魂homie，同时支持匹配相同爱好的homie并且可以和你的homie聊天，但是要遵纪守法喔！最后欢迎大家提出反馈意见！qwq"
  />

  <van-search
      v-model="value"
      placeholder="搜索附近用户"
      input-align="left"
  />

  <van-field name="switch" label="心动模式" label-align="left">
    <template #input>
      <van-switch v-model="checked" size="20" style="margin-left: auto;" inactive-color="#dcdee0" @click="love"/>
    </template>
  </van-field>

  <!--  <van-divider />-->

  <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
  >
    <UserComponent v-for="user in userList" :key="user.id" :user="user"/>
  </van-list>


  <van-empty v-show="!userList || userList.length < 1" description="还没有用户捏"/>


</template>

<style scoped>
:deep(.van-nav-bar__title) {
  font-weight: bold; /* 加粗 */
}

.more {
  //width: 130px;
  margin-left: clac(100% -65);
  margin-bottom: 50px;
}
</style>
